import React, { memo } from "react";
import PropTypes from "prop-types";
import HomeSectionV2Wrapper from "./sytle";
import { useMemo, useState } from "react";
import SectionHeader from "@/components/section-header";
import SectionRooms from "@/components/section-rooms";
import SectionTabs from "@/components/section-tabs";
import SectionFooter from "@/components/section-footer";
const HomeSectionV2 = memo(function HomeSectionV2(props) {
  const { roomListInfoObj } = props;
  const initialName = Object.keys(roomListInfoObj.dest_list ?? {})[0] ?? "";
  //useState只在第一次渲染的时候执行
  const [nowTabName, setNowTabName] = useState(initialName);
  const tabsNames = useMemo(() => {
    console.log(roomListInfoObj.dest_address);
    return (roomListInfoObj.dest_address || []).map((item) => item.name);
  }, [roomListInfoObj]);

  function changeTabsHandle(index, name) {
    setNowTabName(name);
  }
  return (
    <HomeSectionV2Wrapper>
      <SectionTabs tabs={tabsNames} changeTabsHandle={changeTabsHandle} />
      <SectionHeader
        title={roomListInfoObj.title}
        subtitle={roomListInfoObj.subtitle}
      />
      <SectionRooms
        itemWidth="33.33%"
        roomList={roomListInfoObj.dest_list?.[nowTabName]}
      />
      <SectionFooter name={initialName} />
    </HomeSectionV2Wrapper>
  );
});

HomeSectionV2.propTypes = {
  roomListInfoObj: PropTypes.object,
};

export default HomeSectionV2;
